<template>
  <div class="integral">
		<el-col :span="24" class="action-bar">
      <el-button type="primary" size="medium" @click="exportExcelList">导出列表</el-button>
			<el-button type="primary" size="medium" @click="exportExcelDetail">导出详情</el-button>
    </el-col>
    <!--列表-->
		<el-table :data="users" :row-key="getRowKey" class="el-table-style" @selection-change="handleSelectionChange" @select="select">
			<!-- <el-table-column type="selection" :reserve-selection="true" width="55">
    	</el-table-column> -->
			<el-table-column prop="rank_no" label="排名" width="80" sortable center>
			</el-table-column>
			<el-table-column prop="vip_card_number" label="会员编号" width="180" sortable>
			</el-table-column>
			<el-table-column prop="realname" label="姓名" width="150" sortable>
			</el-table-column>
			<el-table-column prop="vip_name" label="会员级别"  min-width="150" sortable>
			</el-table-column>
			<el-table-column prop="integral" label="总积分"  min-width="150" sortable>
			</el-table-column>
			<el-table-column prop="" label="操作" min-width="150" sortable>
				<template slot-scope="scope">
					<div>
						<el-button type="primary" size="mini" @click="showDetail(scope.row.id)">查看详情</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<el-col :span="24" class="footer-bar">
				<div class="page-code">
					<el-pagination
					background
					:page-size="16"
					layout="prev, pager, next"
					:total="totalPage"
					@current-change="pageChange"
						>
				</el-pagination>
				</div>
		</el-col>

					<!-- 弹出的查看详情窗口 -->
			<el-dialog
			:visible.sync="dialogVisible"
			width="50%"
			height="50%"
			center
			class="editor-dialog"
			@close="initData"
			>
     			<el-form  label-width="120px"  ref="detailForm" label-position="left">
				<el-form-item label="会员编号" prop="nickname">
					<div>{{memberDetail.vip_number}}</div>
				</el-form-item>
				<el-form-item label="姓名" prop="sex">
					<div>{{memberDetail.user_name}}</div>
				</el-form-item>
				<el-form-item label="会员级别" prop="phone">
					<div>{{memberDetail.vip_level}}</div>
				</el-form-item>
				<el-form-item :label="item.integral_name" v-for="(item,index) of memberDetail.data" :key="index">
					<div>{{item.integral}}</div>
				</el-form-item>
			</el-form>
    </el-dialog>
  </div>
</template>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
	data() {
		return {
			users:[],
			memberDetail:'',//查看详情
			dialogVisible:false,
			page:1,
			totalPage:0,
			id:'',//数据的id
			getRowKeys(row){
				return row.id
			}
		}
	},
	methods: {
		getRowKey (row) {
      return row.id
    },
		pageChange(e){
			//翻页
			this.page=e;
			this.getIntegralRank()
		},
		async getIntegralRank(){
			//获取积分榜
			const res=await this.$api.getIntegralRank({
				page:this.page,
				limit:16
			})
			if(res.data.level=='success'){
				let arr = res.data.data;
				arr.forEach((item,index)=>{
					item.check = true;
				})
				this.users = arr;
				this.totalPage=res.data.page_info.total
			}
		},
		showDetail(id){
			//查看详情
			this.dialogVisible=true;
			this.id=id;
			this.getUserIntegralDetail();
			
		},
		async getUserIntegralDetail(){
			//查看积分详情
			const res=await this.$api.getUserIntegralDetail({
				vip_id:this.id
			})
			if(res.data.level=='success'){
				this.memberDetail=res.data;
			}else{
				this.$message({
					type:'error',
					message:res.data.message
				})
			}
		},
		exportExcelList(){
      const judge= this.$confirm('导出积分榜？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        }).then(async() => {
					const res=await this.$api.getIntegralRank({})
          if(res.data.level == 'success'){
						let List=res.data.excel_data
            let arr=List.map(val=>{
              let obj={};
              obj['会员编号']=val.vip_card_number;
              obj['姓名']=val.realname;
              obj['会员级别']=val.vip_name;
              obj['总积分']=val.integral;
              return obj
            })
            this.exportExcelHandle(arr);
            this.$message({
              type: 'success',
              message: res.data.message
            });
          }else{
            this.$message({
              type: 'error',
              message: res.data.message
            });
          }
        }).catch(() => {
          
      });
		},
		exportExcelDetail(){
      const judge= this.$confirm('导出积分榜详情？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        }).then(async() => {
					const res=await this.$api.getUserIntegralDetailList({})
          if(res.data.level == 'success'){
						let List=res.data.data;
            let arr=List.map(val=>{
              let obj={};
              obj['会员编号']=val.vip_number;
              obj['姓名']=val.user_name;
							obj['会员级别']=val.vip_level;
							val.integral_num.forEach(item =>{
								obj[item.integral_name] = item.integral
							})
              return obj
						})
            this.exportExcelHandle(arr);
            this.$message({
              type: 'success',
              message: res.data.message
            });
          }else{
            this.$message({
              type: 'error',
              message: res.data.message
            });
          }
        }).catch(() => {
          
      });
	  },
    exportExcelHandle(data){
      let ws = XLSX.utils.json_to_sheet(data);
      let wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "会员");
      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
      } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
      return wbout
    },
		initData(){
			this.memberDetail=''
		},
		handleSelectionChange(val) {
			// console.log(val)
		},
		select(selection, row){
			console.log(row)
		},
	},
	mounted() {
		this.getIntegralRank()
	},
}
</script>
<style lang='scss' scoped>
  .integral{
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
      background: #f2f2f2;
      padding: 8px;
      margin: 10px 0px;
      box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
  }
</style>

<style>
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}

	.member .el-dialog__body{overflow: auto;}
</style>
